<template>
  <div class="main">
    <div class="operate">
      <el-input
        class="inputCss"
        v-model="searchTitle"
        placeholder="请输入搜索的标题"
        clearable
      ></el-input>
      <el-button
        icon="el-icon-search"
        type="primary"
        plain
        @click="getSearchList"
        >&nbsp;查询</el-button
      >
      <el-button
        icon="el-icon-refresh"
        type="primary"
        plain
        class="right"
        @click="refresh"
        >&nbsp;刷新</el-button
      >
    </div>
    <div class="table">
      <vxe-table
        show-overflow
        align="center"
        :data="tableDatas"
        border
        highlight-current-row
        @current-change="handleCurrentRow"
        :height="heightY"
      >
        <vxe-column title="序号" type="seq" width="60" />
        <vxe-column title="标题" field="applyName"></vxe-column>
        <vxe-column field="applyOrgName" title="申请部门" width="300" />
        <vxe-column title="申请人" width="200">
            <template slot-scope="scope">
                {{scope.row.applyFirstPersonName + '、' + scope.row.applySecondPersonName}}
            </template>
        </vxe-column>
        <vxe-column field="startDate" title="开始日期" width="180" />
        <vxe-column field="endDate" title="截止日期" width="180" />
        <vxe-column title="审核状态" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.auditState == 0">待提交</el-tag>
            <el-tag type="warning" v-if="scope.row.auditState == 1"
              >待审核</el-tag
            >
            <el-tag type="success" v-else-if="scope.row.auditState == 2"
              >审核通过</el-tag
            >
            <el-tag
              type="danger"
              @click="auditTurnDown(scope.row)"
              v-else-if="scope.row.auditState == 3"
              >审核驳回</el-tag
            >
            <el-tag type="danger" v-else-if="scope.row.auditState == 4"
              >强制终止</el-tag
            >
          </template>
        </vxe-column>
        <vxe-column title="状态" width="300">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.auditState === 2 || scope.row.auditState === 3 || scope.row.auditState === 4"
              type="primary"
              size="medium"
              plain
              @click="rowClick(scope.row)"
            >
              查看
            </el-button>
            <el-button
              v-else-if="scope.row.auditState === 1"
              type="primary"
              size="medium"
              plain
              @click="rowClick(scope.row)"
            >
              审批
            </el-button>
            <el-button
              v-if="scope.row.auditState === 2"
              type="danger"
              size="medium"
              plain
              @click="forced(scope.row)"
            >
              强制终止
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager
        background
        align="right"
        :current-page.sync="pages.currentPage"
        :page-size.sync="pages.pageSize"
        :total="pages.totalResult"
        size="small"
        :page-sizes="[20, 50, 100, 500, 1000]"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'NextJump',
          'Sizes',
          'FullJump',
          'Total',
        ]"
        @page-change="handlePageChange"
      >
      </vxe-pager>
    </div>
    <documentExamine
      v-if="documentExamineFlag"
      ref="documentExamineRefs"
      @initList="getSearchList"
    ></documentExamine>
  </div>
</template>
  
  <script>
import store from "@/store";
import { searchGetList,approval  } from "@/api/datacentersg/achives/documentApi";
import documentExamine from "./documentExamine.vue";

export default {
  components: { documentExamine },
  data() {
    return {
      heightY: window.innerHeight - 250 + "px",
      tableDatas: [],
      canView: true,
      searchTitle: "",
      documentExamineFlag: false,
      currentRow: null,
      pages: {
        currentPage: 1,
        pageSize: 20,
        totalResult: 0,
      },
    };
  },
  created() {
    this.getSearchList();
  },
  methods: {
    getSearchList() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          applyName: this.searchTitle,
          pageSize: this.pages.pageSize,
          currentPage: this.pages.currentPage,
        },
      };
      searchGetList(params).then((result) => {
        if (result.result) {
          this.tableDatas = result.resultdata.data;
          this.pages.totalResult = result.resultdata.count;
        }
      });
    },
    handleCurrentRow(currentRow) {
      this.currentRow = currentRow.row;
    },
    handlePageChange({ currentPage, pageSize }) {
      this.pages.currentPage = currentPage;
      this.pages.pageSize = pageSize;
      this.getSearchList();
    },
    // 刷新
    refresh() {
      this.getSearchList();
    },
    rowClick(row) {
      this.documentExamineFlag = true;
      this.$nextTick(() => {
        this.$refs.documentExamineRefs.init(row);
      });
    },
    // 强制终止
    forced(row) {
      this.$confirm("确定强制终止吗?", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            applyId: row.applyId,
            auditState: 4,
          },
        };
        approval(params).then((result) => {
          if (result.result) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.getSearchList();
          }
        });
      });
    },
  },
};
</script>
  <style scoped>
.main {
  width: 100%;
  height: calc(100% - 50px);
  background-color: #ffffff;
}
.operate {
  height: 70px;
  padding: 10px;
  /* display: flex; */
  align-items: center;
  justify-content: flex-end;
}
.table {
  height: 85vh;
  overflow-y: scroll;
}
.inputCss {
  float: left;
  margin-right: 10px;
  width: 300px;
}
.selectCss {
  float: left;
  margin-right: 10px;
}
.right {
  float: right;
}
</style>
  